<template>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.carCode" placeholder="车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.ready"
            type="date"
            placeholder="开始时间"
            popper-class="date-style">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          >>>>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.commit"
            type="date"
            placeholder="结束时间"
            popper-class="date-style">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          prop="roleId"
          header-align="center"
          align="center"
          width="100"
          label="汽车图片">
          <template slot-scope="scope">
            <img style="width: 85px; height: 80px;"  :src="require('@/assets/img/'+scope.row.carImgId)"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          width="80"
          label="id">
        </el-table-column>
        <el-table-column
          prop="orderId"
          header-align="center"
          align="center"
          width="80"
          label="订单号">
        </el-table-column>
        <el-table-column
          prop="carType"
          header-align="center"
          align="center"
          width="80"
          label="汽车类型">
        </el-table-column>
        <el-table-column
          prop="carCode"
          header-align="center"
          align="center"
          width="80"
          label="车牌号">
        </el-table-column>
        <el-table-column
          prop="userName"
          header-align="center"
          align="center"
          width="80"
          label="用户名称">
        </el-table-column>
        <el-table-column
          prop="useTime"
          header-align="center"
          align="center"
          width="120"
          label="使用时长">
        </el-table-column>
        <el-table-column
          prop="price"
          header-align="center"
          align="center"
          width="80"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          header-align="center"
          align="center"
          width="80"
          label="总价">
        </el-table-column>
        <el-table-column
          prop="pickupLocation"
          header-align="center"
          align="center"
          width="150"
          label="取车地点">
        </el-table-column>
        <el-table-column
          prop="returnLocation"
          header-align="center"
          align="center"
          width="150"
          label="还车地点">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          width="100"
          label="状态">
          <template slot-scope="scope">
           <p v-if="scope.row.status ==1">进行中</p>
           <p v-if="scope.row.status ==3">审批中</p>
           <p v-if="scope.row.status ==4">已驳回</p>
           <p v-if="scope.row.status ==5">逾期使用</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="100"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          header-align="center"
          align="center"
          width="100"
          label="修改时间">
        </el-table-column>
        <el-table-column
          prop="back"
          header-align="center"
          align="center"
          width="100"
          label="备注">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="140"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="isAuth('dingdan:ok')" type="text" size="small" @click="openYes(scope.row)">通过</el-button>
            <el-button v-if="isAuth('dingdan:no')" type="text" size="small" @click="openNo(scope.row)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="驳回原因" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item>
            <el-input v-model="why" autocomplete="off" placeholder="请输入驳回原因"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="no()">确 定</el-button>
        </div>
      </el-dialog>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[5,8,11,14]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div></el-col>
  </el-row>
</template>

<script>
  export default {
    data(){
      return{
        dataForm:{
          carCode:'',
          userName:'',
          ready:'',
          commit:'',
        },
        status:'1',
        why:'',
        dataList:[],
        dataListLoading:false,
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
        message:'',
        dialogFormVisible:false,
        userEmail:'',
        id:'',
        statuses:3,
      }
    },
    created() {
    this.getDataList()
    },
    methods:{
      openNo(row){
        this.dialogFormVisible = true
        this.status = 4
        this.id = row.id
        this.userEmail = row.userEmail
      },
      no(){
        this.message = "您的预约已被驳回,驳回原因:"+this.why
        this.getEmailCode()
      },
      openYes(row){
        this.message = "您的订单已被通过"
        this.status = 1
        this.userEmail = row.userEmail
        this.id = row.id
        this.getEmailCode()
      },
      //通过
      getEmailCode(){
        this.dialogFormVisible =false
        this.$http({
          url: this.$http.adornUrl('/CarOrderinfo/getEmailCode'),
          method: 'post',
          data: this.$http.adornData({
            'userEmail':this.userEmail,
            'message':this.message
            }
          )
        }).then(({data})=>{
          if(data.code==0){
            this.okPrese()
          }else {
            this.$message.error('邮件发送失败，请重试');
          }
        }).catch(({err})=>{
          console.log(err)
        })
      },
      okPrese(){
        this.$http({
          url:this.$http.adornUrl('/CarOrderinfo/okPrese'),
          methods: 'get',
          params: this.$http.adornParams({
            "id":this.id,
            "status":this.status
          })
        }).then(({data})=>{
          if(data.code == 0){
            this.$message({
              message:"成功",
              type: "success"
            })
            this.getDataList()
          }else {
            this.$message.error('失败')
          }
        })
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/CarOrderinfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'userName': this.dataForm.userName,
            'carCode':this.dataForm.carCode,
            'ready':this.dataForm.ready,
            'commit':this.dataForm.commit,
            'status':this.statuses
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list.list
            this.totalPage = data.list.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
    }
  }
</script>

<style scoped>
  .el-input__inner{
    background-color: #0C3481;
    opacity: 0.8;
    color: #fff;
    text-align: center;
  }
</style>
